useSelectPaymentModal

Hook for opening the payment selection modal

Import

import { useSelectPaymentModal } from '@0xsequence/checkout'

Usage

import { useSelectPaymentModal } from '@0xsequence/checkout'
import { encodeFunctionData, toHex } from 'viem'
import { useAccount } from 'wagmi'

function App() {
  const { address } = useAccount()
  const { openSelectPaymentModal } = useSelectPaymentModal()
  
  const handleCheckout = () => {
    if (!address) return
    
    // ERC-20 payment settings
    const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon
    const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
    const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
    const price = '20000' // Price in smallest unit (0.02 USDC)
    const chainId = 137 // Polygon
    
    // NFT details
    const collectibles = [
      {
        tokenId: '1',
        quantity: '1'
      }
    ]
    
    // Transaction data for the ERC-1155 mint function
    const purchaseTransactionData = encodeFunctionData({
      abi: ERC_1155_SALE_CONTRACT, // Your contract ABI
      functionName: 'mint',
      args: [
        address,
        collectibles.map(c => BigInt(c.tokenId)),
        collectibles.map(c => BigInt(c.quantity)),
        toHex(0),
        currencyAddress,
        price,
        [toHex(0, { size: 32 })]
      ]
    })
    
    // Open the payment selection modal
    openSelectPaymentModal({
      collectibles,
      chain: chainId,
      price,
      targetContractAddress: salesContractAddress,
      recipientAddress: address,
      currencyAddress,
      collectionAddress,
      creditCardProviders: ['sardine', 'transak'],
      transakConfig: {
        contractId: 'your-contract-id',
        apiKey: 'your-api-key'
      },
      copyrightText: 'ⓒ2024 Your Company',
      onSuccess: (txnHash: string) => {
        console.log('success!', txnHash)
      },
      onError: (error: Error) => {
        console.error(error)
      },
      onClose: () => {
        console.log('modal closed!')
      },
      txData: purchaseTransactionData
    })
  }
  
  return (
    <button onClick={handleCheckout}>
      Buy NFT with multiple payment options
    </button>
  )
}

Return Type: UseSelectPaymentModalReturnType

The hook returns an object with the following properties:

type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}

Properties

openSelectPaymentModal

(settings: SelectPaymentSettings) => void

Function to open the Payment Selection modal with the specified settings.

Parameters:

The settings object can include the following properties:

Parameter	Type	Description
collectibles	Array<{tokenId: string, quantity: string}>	Array of collectibles to purchase
chain	number	Blockchain network ID
price	string	Price in smallest unit of the currency
targetContractAddress	string	Address of the contract to interact with
recipientAddress	string	Address to receive the purchased items
currencyAddress	string	Address of the currency token contract
collectionAddress	string	Address of the NFT collection contract
creditCardProviders	string[]	List of supported credit card providers (e.g., ‘sardine’, ‘transak’)
transakConfig	object	Configuration for Transak integration
copyrightText	string	Copyright text to display in the modal
onSuccess	(txnHash: string) => void	Callback when transaction succeeds
onError	(error: Error) => void	Callback when an error occurs
onClose	() => void	Callback when the modal is closed
txData	string	Encoded transaction data for the purchase

closeSelectPaymentModal

() => void

Function to close the Payment Selection modal.

selectPaymentSettings

SelectPaymentSettings | undefined

The current settings configuration for the Payment Selection modal.

Notes

This hook provides methods to control the Payment Selection modal that allows users to purchase digital assets with multiple payment options. The modal offers various payment methods including:

• Pay with cryptocurrency from the user’s wallet
• Swap tokens to pay with a different cryptocurrency
• Pay with credit/debit card
• Receive funds from another wallet